<template>
  <div class="team-division">
    <h2>团队成员及分工</h2>
    <table>
      <tr v-for="(member, index) in teamMembers" :key="index">
        <td>{{ member.name }}</td>
        <td>{{ member.task }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import {reactive } from 'vue';

const teamMembers= reactive(
    [
  { name: "张婷", task: "负责酒店前台工作人员的功能" },
  { name: "卞梓桉", task: "负责用户的功能" },
  { name: "胡欣睿", task: "负责酒店管理员的功能" }
]
);
</script>
<style scoped>
.team-division {
  display: flex;
  flex-direction: column;
}
.team-division h2 {
  writing-mode: horizontal-tb; /* 确保标题横向排列 */
  text-align: center;
  margin-bottom: 20px;
}
.team-division table {
    width: 100%;
    border-collapse: collapse;
    writing-mode: horizontal-tb; /* 确保表格内容横向排列 */
  }
  .team-division td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left; /* 确保文本左对齐 */
  }
</style>